# 创建新的 ChatRoom.vue 文件
<template>
  <div class="chat-room-container">
    <div class="page-header">
      <a-card>
        <div class="header-content">
          <div class="left">
            <h2 class="title">闲聊灌水</h2>
            <p class="description">轻松聊天，分享趣事</p>
          </div>
          <div class="right">
            <a-button type="primary" @click="createPost">
              <template #icon><smile-outlined /></template>
              发起话题
            </a-button>
          </div>
        </div>
      </a-card>
    </div>

    <div class="content-container">
      <a-row :gutter="16">
        <a-col :span="18">
          <a-card class="main-content">
            <div class="filter-bar">
              <a-space>
                <a-radio-group v-model:value="sortBy" button-style="solid">
                  <a-radio-button value="latest">最新发布</a-radio-button>
                  <a-radio-button value="hot">热门话题</a-radio-button>
                  <a-radio-button value="active">活跃讨论</a-radio-button>
                </a-radio-group>
                <a-input-search
                  v-model:value="searchText"
                  placeholder="搜索话题"
                  style="width: 250px"
                  @search="onSearch"
                />
              </a-space>
            </div>

            <a-list
              :data-source="topics"
              :loading="loading"
              :pagination="pagination"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-card class="topic-card hover-shadow" :bordered="false">
                    <template #title>
                      <div class="topic-header">
                        <router-link :to="`/post/${item.id}`" class="topic-title">
                          {{ item.title }}
                        </router-link>
                        <a-tag v-if="item.isHot" color="volcano">热门</a-tag>
                      </div>
                    </template>
                    <div class="topic-content">{{ item.content }}</div>
                    <div class="topic-meta">
                      <a-space>
                        <a-avatar :src="item.author.avatar" :size="24" />
                        <span class="author">{{ item.author.name }}</span>
                        <span class="time">{{ item.createTime }}</span>
                      </a-space>
                      <div class="interaction">
                        <a-space>
                          <span><fire-outlined /> {{ item.popularity }}</span>
                          <span><message-outlined /> {{ item.comments }}</span>
                          <span><like-outlined /> {{ item.likes }}</span>
                        </a-space>
                      </div>
                    </div>
                    <div class="topic-tags">
                      <a-tag 
                        v-for="tag in item.tags" 
                        :key="tag"
                        color="blue"
                      >
                        {{ tag }}
                      </a-tag>
                    </div>
                  </a-card>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>

        <a-col :span="6">
          <a-card title="今日热议" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="hotTopics" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a class="hot-topic">
                    <div class="topic-info">
                      <span class="rank" :class="getRankClass(item.rank)">{{ item.rank }}</span>
                      <span class="name">{{ item.title }}</span>
                    </div>
                    <span class="heat">{{ item.heat }}热度</span>
                  </a>
                </a-list-item>
              </template>
            </a-list>
          </a-card>

          <a-card title="活跃用户" class="side-card">
            <template #extra><a>更多</a></template>
            <a-list :data-source="activeUsers" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <a-avatar :src="item.avatar" />
                    </template>
                    <template #title>
                      <a>{{ item.name }}</a>
                    </template>
                    <template #description>
                      {{ item.description }}
                    </template>
                  </a-list-item-meta>
                  <a-tag :color="item.level.color">{{ item.level.name }}</a-tag>
                </a-list-item>
              </template>
            </a-list>
          </a-card>

          <a-card title="社区公告" class="side-card">
            <a-list :data-source="announcements" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <a class="announcement">
                    <notification-outlined />
                    <span class="content">{{ item.content }}</span>
                  </a>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { 
  SmileOutlined,
  FireOutlined,
  MessageOutlined,
  LikeOutlined,
  NotificationOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const loading = ref(false)
const searchText = ref('')
const sortBy = ref('latest')

// 模拟数据
const topics = ref([
  {
    id: 1,
    title: '今天遇到一件超有趣的事情...',
    content: '中午去吃饭的时候，看到一只小猫咪在追自己的尾巴，转啊转的特别可爱...',
    author: {
      name: '快乐达人',
      avatar: 'https://joeschmoe.io/api/v1/random'
    },
    createTime: '10分钟前',
    popularity: 89,
    comments: 23,
    likes: 45,
    isHot: true,
    tags: ['日常', '趣事', '萌宠']
  },
  // 更多话题数据...
])

const hotTopics = [
  { rank: 1, title: '今日份的快乐源泉', heat: '9999+' },
  { rank: 2, title: '有趣的生活小事', heat: '8888' },
  { rank: 3, title: '分享一个开心故事', heat: '7777' },
  { rank: 4, title: '搞笑段子大赛', heat: '6666' },
  { rank: 5, title: '生活中的小确幸', heat: '5555' }
]

const activeUsers = [
  {
    name: '快乐达人',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '分享快乐，传递正能量',
    level: { name: 'LV6', color: '#f50' }
  },
  {
    name: '段子手',
    avatar: 'https://joeschmoe.io/api/v1/random',
    description: '搞笑段子制造机',
    level: { name: 'LV5', color: '#2db7f5' }
  }
]

const announcements = [
  { content: '欢迎新用户加入我们的快乐大家庭！' },
  { content: '社区有奖活动：分享你的快乐源泉' },
  { content: '请文明发言，共建和谐社区' }
]

const pagination = {
  current: 1,
  total: 100,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 个话题`
}

// 创建话题
const createPost = () => {
  router.push('/create-post')
}

// 搜索
const onSearch = (value) => {
  console.log('search:', value)
}

// 获取排名样式
const getRankClass = (rank) => {
  if (rank === 1) return 'rank-first'
  if (rank === 2) return 'rank-second'
  if (rank === 3) return 'rank-third'
  return 'rank-normal'
}
</script>

<style lang="scss" scoped>
.chat-room-container {
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
  padding-top: 24px;

  .page-header {
    margin-bottom: 24px;
    padding: 0 24px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .title {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
          background: linear-gradient(45deg, #13c2c2, #52c41a);
          -webkit-background-clip: text;
          color: transparent;
        }

        .description {
          margin: 8px 0 0;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .content-container {
    padding: 0 24px;
    max-width: 1400px;
    margin: 0 auto;

    .main-content {
      margin-bottom: 24px;

      .filter-bar {
        margin-bottom: 24px;
      }

      .topic-card {
        width: 100%;
        margin-bottom: 16px;
        transition: all 0.3s ease;

        .topic-header {
          display: flex;
          align-items: center;
          gap: 8px;

          .topic-title {
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size: 16px;

            &:hover {
              color: #1890ff;
            }
          }
        }

        .topic-content {
          margin: 12px 0;
          color: rgba(0, 0, 0, 0.65);
        }

        .topic-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;

          .author {
            color: rgba(0, 0, 0, 0.65);
            font-weight: 500;
          }

          .time {
            color: rgba(0, 0, 0, 0.45);
          }

          .interaction {
            display: flex;
            gap: 16px;
          }
        }

        .topic-tags {
          margin-top: 12px;
          display: flex;
          gap: 8px;
        }
      }
    }

    .side-card {
      margin-bottom: 16px;

      .hot-topic {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: rgba(0, 0, 0, 0.85);

        .topic-info {
          display: flex;
          align-items: center;
          gap: 8px;

          .rank {
            font-weight: bold;
            width: 20px;
            text-align: center;

            &.rank-first {
              color: #f5222d;
            }

            &.rank-second {
              color: #fa8c16;
            }

            &.rank-third {
              color: #faad14;
            }

            &.rank-normal {
              color: rgba(0, 0, 0, 0.45);
            }
          }

          .name {
            font-weight: 500;
          }
        }

        .heat {
          color: #ff4d4f;
          font-size: 12px;
        }
      }

      .announcement {
        display: flex;
        align-items: center;
        gap: 8px;
        color: rgba(0, 0, 0, 0.85);

        .anticon {
          color: #faad14;
        }

        .content {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style> 